<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="折扣商品管理" @clickLeft="leftBack" background-color="#318cff" color="#fff">
			<view slot="other" class="order-tabs dfj-flex dfj-flex-ai-c dfj-t-c dfj-bg-white">
				<view v-for="(item,index) in tabs" @click="orderTab(item.id)" class="dfj-flex-1 dfj-pd-tb-20" :class="state == item.id?'dfj-bd-b-base dfj-bd-w-4':''">{{ item.name }}</view>
			</view>
		</uni-nav-bar>
		<view class="dfj-mg-t-50 dfj-pd-t-30">
			<block v-for="(item,index) in list">
				<!-- 待使用 -->
				<block v-if="item.state == 0">
					<view class="dfj-pd-lr-20">
						<view class="dfj-pd-tb-20 dfj-t-c">
							<text class="dfj-bg-e1e dfj-t-white dfj-inline-block dfj-pd-tb-10 dfj-pd-lr-30 dfj-bd-radius-30">{{ item.createDate | timestampToTime }}</text>
						</view>
						<view class="dfj-bd-radius-20 dfj-bg-white dfj-t-666 dfj-flex dfj-overflow-hide dfj-mg-b-20">
							<view class="dfj-pd-20"><image style="width: 120rpx;height: auto;vertical-align: top;" mode="widthFix" :src="item.productUrl"/></view>
							<view class="dfj-flex-1 dfj-pd-tb-20 dfj-pd-r-20" style="width: 30%;">
								<view class="dfj-t-hide">{{ item.productTitle }}</view>
								<view class="dfj-t-hide dfj-t-danger dfj-f-35">￥{{ item.price }}</view>
								<view class="dfj-t-999 dfj-f-18">{{ item.operationDate | timestampToTime }}-{{ item.invalidDate | timestampToTime }}</view>
							</view>
							<view class="dfj-bg-base dfj-pd-lr-40 dfj-t-white" @click="wholesale(item)">
								<view class="dfj-mg-t-50 dfj-f-30">{{ item.discount }}折</view>
								<view class="dfj-f-22">去批货</view>
							</view>
						</view>
					</view>
				</block>
				<!-- 待换糖 -->
				<block v-if="item.state == 1">
					<view class="dfj-pd-lr-20">
						<view class="dfj-pd-tb-20 dfj-t-c">
							<text class="dfj-bg-e1e dfj-t-white dfj-inline-block dfj-pd-tb-10 dfj-pd-lr-30 dfj-bd-radius-30">{{ item.operationDate | timestampToTime }}</text>
						</view>
						<view class="dfj-bd-radius-20 dfj-bg-white dfj-t-666 dfj-flex dfj-overflow-hide dfj-mg-b-20">
							<view class="dfj-pd-20"><image style="width: 120rpx;height: auto;vertical-align: top;" mode="widthFix" :src="item.productUrl"/></view>
							<view class="dfj-flex-1 dfj-pd-tb-20 dfj-pd-r-20" style="width: 30%;">
								<view class="dfj-t-hide">{{ item.productTitle }}</view>
								<view class="dfj-t-hide dfj-t-danger dfj-f-35">￥{{ item.price }}</view>
								<!-- <view class="dfj-t-999 dfj-f-18">{{ item.operationDate | timestampToTime }}-{{ item.invalidDate | timestampToTime }}</view> -->
							</view>
							<view class="dfj-flex dfj-flex-f-c-w dfj-flex-jc-c dfj-t-white dfj-t-c">
								<view class="dfj-flex-1 dfj-bg-danger dfj-flex dfj-flex-ai-c dfj-pd-lr-22" style="width: 100%;" @click="wantGoods(item.id)">我要商品</view>
								<view class="dfj-flex-1 dfj-flex dfj-flex-ai-c dfj-pd-lr-22" style="background: #e5be00;" @click="saleGoods(item.id)">去寄卖</view>
							</view>
						</view>
					</view>
				</block>
				<!-- 换糖中 -->
				<block v-if="item.state == 2">
					<view class="dfj-pd-lr-20">
						<view class="dfj-pd-tb-20 dfj-t-c">
							<text class="dfj-bg-e1e dfj-t-white dfj-inline-block dfj-pd-tb-10 dfj-pd-lr-30 dfj-bd-radius-30">{{ item.operationDate | timestampToTime }}</text>
						</view>
						<view class="dfj-bd-radius-20 dfj-bg-white dfj-t-666 dfj-flex dfj-overflow-hide dfj-mg-b-20">
							<view class="dfj-pd-20"><image style="width: 120rpx;height: auto;vertical-align: top;" mode="widthFix" :src="item.productUrl"/></view>
							<view class="dfj-flex-1 dfj-pd-tb-20 dfj-pd-r-20" style="width: 30%;">
								<view class="dfj-t-hide">{{ item.productTitle }}</view>
								<view class="dfj-t-hide dfj-t-danger dfj-f-35">￥{{ item.price }}</view>
								<view class="dfj-t-999 dfj-f-18">预计时间:{{ item.invalidDate | timestampToTime }}</view>
							</view>
						</view>
					</view>
				</block>
				<!-- 已完成 -->
				<block v-if="item.state == 4">
					<view class="dfj-pd-lr-20">
						<view class="dfj-pd-tb-20 dfj-t-c">
							<text class="dfj-bg-e1e dfj-t-white dfj-inline-block dfj-pd-tb-10 dfj-pd-lr-30 dfj-bd-radius-30">{{ item.operationDate | timestampToTime }}</text>
						</view>
						<view class="dfj-bd-radius-20 dfj-bg-white dfj-t-666 dfj-flex dfj-overflow-hide dfj-mg-b-20">
							<view class="dfj-pd-20"><image style="width: 120rpx;height: auto;vertical-align: top;" mode="widthFix" :src="item.productUrl"/></view>
							<view class="dfj-flex-1 dfj-pd-tb-20 dfj-pd-r-20" style="width: 30%;">
								<view class="dfj-t-hide">{{ item.productTitle }}</view>
								<view class="dfj-t-999 dfj-f-18 dfj-mg-t-20">寄卖失败，该商品已发出，<navigator :url="`/pages/my/order-details?orderId=${item.orderid}`" class="dfj-inline-block dfj-t-base">请查看</navigator></view>
							</view>
						</view>
					</view>
				</block>
				<!-- 已失效 -->
				<block v-if="item.state == 5">
					<view class="dfj-pd-lr-20">
						<view class="dfj-pd-tb-20 dfj-t-c">
							<text class="dfj-bg-e1e dfj-t-white dfj-inline-block dfj-pd-tb-10 dfj-pd-lr-30 dfj-bd-radius-30">{{ item.createDate | timestampToTime }}</text>
						</view>
						<view class="dfj-bd-radius-20 dfj-bg-white dfj-t-666 dfj-flex dfj-overflow-hide dfj-mg-b-20">
							<view class="dfj-pd-20"><image style="width: 120rpx;height: auto;vertical-align: top;" mode="widthFix" :src="item.productUrl"/></view>
							<view class="dfj-flex-1 dfj-pd-tb-20 dfj-pd-r-20" style="width: 30%;">
								<view class="dfj-t-hide">{{ item.productTitle }}</view>
								<view class="dfj-t-hide dfj-t-danger dfj-f-35">￥{{ item.price }}</view>
								<view class="dfj-t-999 dfj-f-18">{{ item.operationDate | timestampToTime }}-{{ item.invalidDate | timestampToTime }}</view>
							</view>
							<view class="dfj-bg-999 dfj-pd-lr-40 dfj-t-white">
								<view class="dfj-mg-t-50 dfj-f-30">{{ item.discount }}折</view>
								<view class="dfj-f-22">已失效</view>
							</view>
						</view>
					</view>
				</block>
				
			</block>
			
			
			<uni-popup ref="popup" type="bottom">
				<view class="dfj-bg-white">
					<view class="dfj-t-c dfj-pd-20 dfj-t-666">批发商品</view>
					<view class="dfj-t-666 dfj-flex dfj-overflow-hide dfj-mg-b-20" v-if="w_item">
						<view class="dfj-pd-20"><image style="width: 120rpx;height: auto;vertical-align: top;" mode="widthFix" :src="w_item.productUrl"/></view>
						<view class="dfj-flex-1 dfj-pd-tb-20 dfj-pd-r-20" style="width: 30%;">
							<view class="dfj-t-hide">{{ w_item.productTitle }}</view>
							<view class="dfj-t-hide dfj-t-danger dfj-f-35">￥{{ w_item.discountPrice | filtersNum }} <text class="dfj-f-20 dfj-pd-lr-15 dfj-t-white dfj-mg-l-30 dfj-bd-radius-20" style="background: #FAA851;">折扣{{ w_item.discount }}</text></view>
							<view class="dfj-t-999 dfj-f-18">原价{{ w_item.price | filtersNum }}</view>
						</view>
					</view>
					<view class="dfj-pd-50" v-if="w_item">
						<button type="primary" style="border-radius: 40rpx;" @click="pay()">去支付￥{{ w_item.discountPrice | filtersNum }}批发</button>
					</view>
				</view>
			</uni-popup>
			
			<uni-popup ref="popupPay" type="bottom">
				<view class="dfj-bg-white">
					<view class="dfj-pd-30 dfj-t-c">
						<view class="dfj-t-666 dfj-f-28">请输入交易密码</view>
						<!-- <view class="dfj-pd-tb-30 dfj-f-35 dfj-t-999">支付：<text class="dfj-t-danger">￥890.0</text></view> -->
						<view class="code-box">
							<block v-for="(item, index) in 6" :key="index">
								<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
							</block>
						</view>
					</view>
					<view class="keyboard">
						<block v-for="(item, index) in 9" :key="index">
							<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
						</block>
						<view class="keyboard-item hide"></view>
						<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
						<view class="keyboard-item delte" @tap="del()"><image style="width: 60rpx;height: auto;" mode="widthFix" src="/static/img/home/del.png" :lazy-load="true"></image></view>
					</view>
				</view>
			</uni-popup>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {// 0 1 2 4 5 '待使用','待寄卖','寄卖中','已完成','已失效'
				tabs: [
					{id: 0,name: '待使用'},
					{id: 1,name: '待换糖'},
					{id: 2,name: '换糖中'},
					{id: 4,name: '已完成'},
					{id: 5,name: '已失效'}
				],
				state: 0,
				list: [],
				w_item: '',
				isGoods: '',
				password: '',
				g_id: '',
				loginInfo: ''
			}
		},
		filters: {
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			},
			filtersNum(val) {
				return val.toFixed(2)
			}
		},
		onLoad(options) {
			this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'))
			this.state = options.state || 0
		},
		onShow() {
			this.list = [],
			this.page = 1,
			this.getList()
		},
		methods: {
			leftBack() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			getList() {
				this.$http({
					url: '/order/getGoodsList',
					data: {
						state: this.state, //-1全部 0 待付款 2待发货 3代收款 4已完成
						page: this.page,
						rows: 20,
						rnd:Math.random()
					},
					method: 'GET'
				}).then(res=>{
					if(res.data.list.length>0){
						this.page++;
						this.list.push(...res.data.list);
					}
				})
			},
			orderTab(i) {
				this.state = i
				this.list = [],
				this.page = 1,
				this.getList()
			},
			wholesale(item) {
				this.$refs.popup.open();
				this.w_item = item;
			},
			pay() {
				this.$http({
					url: '/order/getActiveInfo',
					data: {
						gid: this.w_item.id
					},
					dataType: 'json'
				}).then(res=> {
					if(res.flag){
						uni.navigateTo({
							url: `/pages/my/pay?gid=${this.w_item.id}&orderMoney=${this.w_item.discountPrice}`
						})
					}
				})
			},
			wantGoods(id) {
				if(this.loginInfo.userInfo.setPayPwd == 0){
					uni.showToast({
						title: '请先去设置支付密码',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.hideToast();
						uni.navigateTo({
							url: '/pages/my/set-payment-code'
						})
					},1000)
					return false;
				}
				this.g_id = id
				this.isGoods = true
				this.$refs.popupPay.open()
			},
			saleGoods(id) {
				if(this.loginInfo.userInfo.setPayPwd == 0){
					uni.showToast({
						title: '请先去设置支付密码',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.hideToast();
						uni.navigateTo({
							url: '/pages/my/set-payment-code'
						})
					},1000)
					return false;
				}
				this.g_id = id
				this.isGoods = false
				this.$refs.popupPay.open()
			},
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						if(this.isGoods == true){
							this.$http({
								url: '/order/createOrderByGetGoods',
								data: {
									gid: this.g_id,
									payPwd: this.password
								},
								dataType: 'json'
							}).then(res=> {
								if(res.flag){
									this.$refs.popupPay.close()
									this.state = 3
									this.list = [],
									this.page = 1,
									this.getList()
									this.password = ''
								}else{
									this.password = ''
								}
							})
						}else{
							this.$http({
								url: '/order/sellGetGoods',
								data: {
									gid: this.g_id,
									payPwd: this.password
								},
								dataType: 'json'
							}).then(res=> {
								if(res.flag){
									uni.showToast({
										title: '寄卖成功'
									})
									this.$refs.popupPay.close()
									this.state = 2
									this.list = [],
									this.page = 1,
									this.getList()
									this.password = ''
								}else{
									this.password = ''
								}
							})
						}
					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
		},
		onReachBottom(){
			this.getList();
		},
	}
</script>

<style lang="scss" scoped>
	.keyboard{
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition:all 0.2s ease-in 0.2s;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #EBEBEB;
		border-top:none;
		border-left:none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.code-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 1px solid #d0d0d0;
	}
	.code-box-item {
		width: 86rpx;
		height: 86rpx;
		background: #fff;
		font-size: 40rpx;
		line-height: 86rpx;
		text-align: center;
		flex: 1;
		border: 1rpx solid #e5e5e5;
	}
</style>
